<template>
  <div class="step_content">
    <a-form :form="form">
      <div class="step_header">密码重置</div>
      <div class="step_input">
        <a-form-item>
          <a-input
            v-decorator="[
              'password',
              {
                rules: [
                  {
                    required: true,
                    message: '请输入您的密码!'
                  },
                  {
                    validator: validateToNextPassword
                  }
                ]
              }
            ]"
            :type="passwordShow ? 'password' : 'text'"
            placeholder="请输入新密码"
            autocomplete="off"
          >
            <a-icon
              v-if="passwordShow"
              slot="suffix"
              :component="PasswordHide"
              style="fontSize: 32px"
              @click="changePasswordShow"
            />
            <a-icon v-else slot="suffix" :component="PasswordShow" style="fontSize: 32px" @click="changePasswordShow" />
          </a-input>
        </a-form-item>
      </div>
      <div class="step_input again_input">
        <a-form-item>
          <a-input
            v-decorator="[
              'confirm',
              {
                rules: [
                  {
                    required: true,
                    message: '请输入您的密码!'
                  },
                  {
                    validator: compareToFirstPassword
                  }
                ]
              }
            ]"
            :type="confirmShow ? 'password' : 'text'"
            placeholder="请确认新密码"
            autocomplete="off"
            @blur="handleConfirmBlur"
          >
            <a-icon
              v-if="confirmShow"
              slot="suffix"
              :component="PasswordHide"
              style="fontSize: 32px"
              @click="changePasswordShow"
            />
            <a-icon v-else slot="suffix" :component="PasswordShow" style="fontSize: 32px" @click="changeConfirmShow" />
          </a-input>
        </a-form-item>
      </div>
      <div>
        <a-button type="primary" class="button_center" @click="nextStep">下一步</a-button>
      </div>
    </a-form>
  </div>
</template>

<script>
import { savePassword } from '@/api/login'
import PasswordHide from '@/assets/svg/PasswordHide.svg'
import PasswordShow from '@/assets/svg/PasswordShow.svg'
export default {
  name: 'StepReset3',
  props: {
    phoneNumber: {
      type: String,
      default: () => null
    }
  },
  data() {
    return {
      PasswordHide,
      PasswordShow,
      passwordShow: true,
      confirmShow: true,
      confirmDirty: true,
      form: this.$form.createForm(this)
    }
  },
  methods: {
    nextStep() {
      const {
        form: { validateFields }
      } = this
      // 先校验，通过表单校验后，才进入下一步
      validateFields((err, values) => {
        if (!err) {
          const params = {}
          params.passworld = values.passworld || null
          params.mobile = this.phoneNumber || null
          savePassword(params)
            .then(res => {
              if (res) {
                this.$emit('nextStep')
              }
            })
            .catch(function(error) {
              this.$error('验证码错误', error)
            })
        }
      })
    },
    handleConfirmBlur(e) {
      const value = e.target.value
      this.confirmDirty = this.confirmDirty || !!value
    },
    compareToFirstPassword(rule, value, callback) {
      const form = this.form
      if (value && value !== form.getFieldValue('password')) {
        callback('两次密码输入不一致，请重新输入！')
      } else {
        callback()
      }
    },
    validateToNextPassword(rule, value, callback) {
      const form = this.form
      if (value && this.confirmDirty) {
        form.validateFields(['confirm'], { force: true })
      }
      callback()
    },
    // 密码输入是否显示
    changePasswordShow() {
      this.passwordShow = !this.passwordShow
    },
    // 密码确认是否显示
    changeConfirmShow() {
      this.confirmShow = !this.confirmShow
    }
  }
}
</script>

<style lang="less" scoped>
@import '../index.less';
.step_content {
  width: 420px;
  height: 333px;
  background-color: #feffff;
  box-shadow: 2px 1px 18px -2px #e0ecff;
  border-radius: 1px;
  text-align: center;
  .step_header {
    margin: 45px 112px 30px 112px;
    font-size: 24px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 24px;
    letter-spacing: 0px;
    color: #333333;
  }
  .step_input {
    width: 320px;
    margin: 0 auto;
    margin-bottom: 12px;
  }
  .again_input {
    margin-bottom: 30px;
  }
  /deep/ .ant-input {
    height: 42px;
    padding: 0 10px;
    font-size: 14px;
  }
  .ant-form-item {
    margin-bottom: 0;
  }
  .button_center {
    width: 320px;
    height: 48px;
    background-color: #33b0ed;
    border-radius: 2px;
    font-size: 14px;
    color: #ffffff;
  }
  .button_center {
    width: 320px;
    height: 48px;
    background-color: #33b0ed;
    border-radius: 2px;
    font-size: 14px;
    color: #ffffff;
  }
  .button_center:hover {
    cursor: pointer;
    color: @font-hover;
  }
  /deep/ .ant-form-explain {
    text-align: left;
  }
}
</style>
